import React, { useEffect, useState } from "react";
import { Menu } from "antd";
import { useNavigate, useLocation } from "react-router-dom";
import { AppstoreOutlined, MailOutlined } from "@ant-design/icons";
export default function Aside() {
  const navigate = useNavigate();
  const location = useLocation();
  const [defaultKeys, setDefaultKey] = useState("");
  // 加个空数组模仿mouted
  useEffect(() => {
    let path = location.pathname;
    let key = path.split("/")[1];
    setDefaultKey(key);
  }, []);
  function getItem(label, key, icon, children, type) {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  }
  const items = [
    getItem("查看文件列表", "list", <MailOutlined />),
    getItem("查看文件table列表", "listtable", <MailOutlined />),
    getItem("文章编辑", "edit", <AppstoreOutlined />),
    getItem("修改资料", "means", <AppstoreOutlined />),
  ];

  const onClick = (e) => {
    console.log("click ", e);
    setDefaultKey(e.key);
    navigate("/" + e.key);
  };
  return (
    <Menu
      onClick={onClick}
      style={{
        width: 200,
      }}
      className="aside"
      selectedKeys={[defaultKeys]}
      mode="inline"
      theme="dark"
      items={items}
    />
  );
}
